<template>
	<view>
		<view ><u-search  @search="searchClick()"  v-model="listObj.houseName"   :showAction="false"  :clearabled="true" shape="round"></u-search></view>
		<view  >
			<!-- #ifdef H5-->
			<u-list
				@scrolltolower="scrolltolower"
				:enableFlex="true"
				@scroll="scrollChange"
				:height="$store.state.cheight-34"
				ref="ulist"
				:scrollTop="scrollTop"
			>
			<!--#endif-->
			<!-- #ifdef MP-->
			<u-list
				@scrolltolower="scrolltolower"
				:enableFlex="true"
				@scroll="scrollChange"
				ref="ulist"
				:scrollTop="scrollTop"
			>
			<!--#endif-->
				<u-list-item
					v-for="(item, index) in indexList"
					:key="index"
					style="padding: 5px;"
				>
				    <view class="u-page">
				        <view class="u-demo-block">
				            <view class="u-demo-block__content">
				                <view class="album">
				                    <view class="album__avatar">

										<u-avatar  randomBgColor shape="circle" fontSize="10" :text="item.userId"></u-avatar>
				                    </view>
				                    <view class="album__content">
				                        <u--text
				                                :text="item.contactName"
				                                type="primary"
				                                bold
				                                size="17"
				                        ></u--text>
				                        <u--text margin="0 0 4px 0" :text="item.houseName"></u--text>
										<u--text margin="0 0 4px 0" :text="item.housePrice"></u--text>
										<u--text margin="0 0 4px 0" :text="item.houseStatus"></u--text>
										<u--text margin="0 0 4px 0" :text="item.houseArea"></u--text>
										<u--text margin="0 0 4px 0" :text="item.houseBuiltYear"></u--text>
										<u--text margin="0 0 4px 0" :text="item.houseFloor"></u--text>
										<u--text margin="0 0 4px 0" :text="item.bedroomNumber"></u--text>
										<u--text margin="0 0 4px 0" :text="item.bathroomNumber"></u--text>
										<u--text margin="0 0 4px 0" :text="item.hasKitchen"></u--text>
										<u--text margin="0 0 4px 0" :text="item.hasParlor"></u--text>
										<u--text margin="0 0 4px 0" :text="item.hasElevator"></u--text>
										<u--text margin="0 0 4px 0" :text="item.hasAircondition"></u--text>
				                        <u--text margin="0 0 4px 0" :text="item.contactName"></u--text>
				                        <u--text margin="0 0 4px 0" :text="item.contactPhone"></u--text>
										<u-album :urls="[item.image]" keyName="src2"></u-album>
				                    </view>
				                </view>
				            </view>
				        </view>
				    </view>
				</u-list-item>
				
			</u-list>
			<u-back-top @click="backTop" :scrollTop="scrollTop" mode="square" :iconStyle="{
					fontSize: '32rpx',
					color: '#2979ff'
				}"></u-back-top>
		</view>
	</view>
</template>

<script>
	import {getHousePage} from "@/api/hourse.js"
	export default {
		data() {
			return {
				indexList: [],
				listObj:{
					current:1,
					pageSize:5,
					houseName:'',
				},
				scrollTop: 0, // 滚动条位置
			}
		},
		created(){
			this.$store.dispatch("setCheightActions");
			this.$store.dispatch("setUserInfoActions");
		},
		onLoad() {
			let token=uni.getStorageSync('token');
			if(token===null||token===''){
				uni.redirectTo({
					url:'/pages/index/index'
				})
			}
			this.scrollTop = 0; // 初始化滚动条位置为0
			this.loadmore()
		},
		methods: {
			scrolltolower() {
				this.listObj.current++;
				this.loadmore()
			},
			loadmore() {
				let options = ['未租赁','已被下单','已租赁'];
				let hasoptions=['否','是']
				getHousePage(this.listObj).then(res=>{
					let pagelist=res.data.records.map(item=>{
						return {
							...item,
							housePrice:"租金:"+item.housePrice,
							houseStatus:"状态:"+options[item.houseStatus],
							houseArea:"面积:"+item.houseArea+"m²",
							houseBuiltYear:"建立年份:"+item.houseBuiltYear,
							houseFloor:"楼层:"+item.houseFloor,
							bedroomNumber:"卧室数量:"+item.bedroomNumber,
							bathroomNumber:"卫生间数量:"+item.bathroomNumber,
							hasKitchen:"是否有厨房:"+hasoptions[item.hasKitchen],
							hasParlor:"是否有客厅:"+hasoptions[item.hasParlor],
							hasElevator:"是否有电梯:"+hasoptions[item.hasElevator],
							hasAircondition:"是否有空调:"+hasoptions[item.hasAircondition],
							userId:"u"+item.userId,
							contactPhone:"联系人:"+item.contactName,
							contactPhone:"联系人电话:"+item.contactPhone
						}

					});
					this.indexList.push(...pagelist);
				})
			},
			backTop(){
				this.scrollTop=0;
			},
			searchClick(){
				this.listObj.current=1;
				this.indexList.length=0;
				this.loadmore()
				this.backTop();
			},
			scrollChange(scrollTop){
				this.scrollTop = scrollTop; // 实时更新滚动条位置
			}

		},

	}
</script>

<style lang="scss" scope>
    .album {
        @include flex;
        align-items: flex-start;

        &__avatar {
             padding: 5px;
             border-radius: 3px;
         }
    
        &__content {
             margin-left: 10px;
             flex: 1;
         }
    }
</style>
